<template>
    <div class="others">
        <!--1. 顶部导航栏 -->
       <van-nav-bar
        :title="tit"
        left-arrow
        @click-left="onClickLeft"
        />
        <!-- 列表区域 -->
        <div class="content" v-for="(list, ind) in this.OtherObj" :key="ind" @click="jumpToDetail(list.boyu_quid)">
            <div>
                <img :src="list.boyu_qhphoto">
            </div>
            <div>
                <h4 v-text="list.boyu_qhintroduce"></h4> 
                <p v-text="list.boyu_quantity"></p>
                <p v-text="list.boyu_qarea"></p>
            </div>
            <div>
                <i v-text="list.boyu_qhprice.slice(0,-4)"></i>&nbsp;&nbsp;
                <span v-text="list.boyu_qhprice.slice(-3)"></span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
    return { 
        OtherObj:[],
        tit:''
        }
    },
    methods: {
        onClickLeft(){
           this.$router.go(-1);
        },
        fatterData(){
            this.OtherObj=JSON.parse(this.$route.query.Other_obj);
            this.tit=this.$route.query.tit;
        },
        //跳转到detail
        jumpToDetail(newHid){
            this.$router.push({
                path:'/detail',
                // name:'detail',
                query:{hid:newHid}  
            });
        }
    },
    mounted(){
        this.fatterData();
    }
}
</script>
<style scoped>
/* 样式初始化 */
h4,p{
    margin: 0;
    padding: 0;
}
p{
    font-size: 12px;
    padding: 5px 0;
    color: #666;
}
/* 内容样式 */
.content{
    padding:5px 15px 0;
    height: 90px;
    position: relative;
}
.content div{
    float: left;
}
.content div:first-child{
    width: 30%;
    height: 80px;
    border-radius: 5px;
    overflow: hidden;
    padding-right: 15px;
}
.content div:nth-child(2){
    width: 65%;
    height: 82px;
    border-bottom: 0.2px solid #ebedf0;
}
.content div:nth-child(2) p{
    color: #888;
}
.content div:last-child{
    position: absolute;
    bottom: 18px;
    right: 15px;
}
.content div:last-child i{
    color: orange;
    font-size: 18px;
}
.content div:last-child{
    font-size: 12px;
}
</style>

